<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>个人理财系统登录界面</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link href="../static/lyear/css/materialdesignicons.min.css" th:href="@{/lyear/css/materialdesignicons.min.css}"
          rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link href="../static/lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet"
          type="text/css"/>

    <link rel="stylesheet" type="text/css" href="../static/css/login.css" th:href="@{/css/login.css}"/>
</head>
<body>
<div class="row lear-wrapper">
    <div class="lear-login">
        <div class="login-center1">
            <div class="login-header text-center">
                <h1>理财应用</h1>
            </div>
            <form>
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您手机号" class="form-control"
                           name="username" id="username"/><span class="help-block"></span>
                    <span class="mdi mdi-account form-control-feedback"
                          aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control"
                           id="password" name="password"/><span class="help-block"></span>
                    <span class="mdi mdi-lock form-control-feedback"
                          aria-hidden="true"></span>
                </div>

                <div id="captcha_note_parent"
                     class="form-group has-feedback feedback-left row">
                    <div class="col-xs-7">
                        <input type="text" id="captcha" name="captcha"
                               class="form-control" placeholder="请输入验证码">
                    </div>
                    <div class="col-xs-5">
                        <canvas id="canvas" width="120" height="45"></canvas>
                    </div>
                    <span id="captcha_note_child" class="help-block"
                          style="margin-left: 15px"></span>
                </div>

                <div class="form-group">
                    <button id="login_btn" class="btn btn-block btn-primary"
                            type="button">立即登录
                    </button>
                </div>
            </form>
            <div style="margin-left: 100px">
                <a th:href="@{/register}">还没有账号？去注册</a>
            </div>

        </div>
    </div>
</div>

<!-- 引入jQuery和bootstrap的js -->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/js/md5.js}"></script>

<!-- 点线粒子插件 -->
<script color="255,0,255" opacity='0.8'
        zIndex="9999" count="99"
        src="/js/canvas-nest.js" th:src="@{/js/canvas-nest.js}">
</script>

<script>
    var show_num = [];
    var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
    $(function () {
        $("input[name='username']").blur(verifyUsername);
        $("input[name='password']").change(removeLoginDisabled);

        //生成图片验证码
        drawPic(show_num);
        $("#canvas").click(function (e) {
            //取消事件的默认动作。
            e.preventDefault();
            drawPic(show_num);
        });

        $("#captcha").blur(verifyCaptcha);
        $("#login_btn").mousedown(verifyLogin);

        //回车登录
        $("body").keyup(function (event) {
            //keyCode=13是回车键
            if (event.keyCode === 13) {
                verifyLogin();
            }
        });

    });

    //验证验证码
    function verifyCaptcha() {
        var captcha_num = $("#captcha").val().toLowerCase();
        var real_num = show_num.join("");
        $("#captcha_note_parent").removeClass("has-success has-error");
        $("#captcha_note_child").text("");
        if (captcha_num == "") {
            $("#captcha_note_parent").addClass("has-error");
            $("#captcha_note_child").text("验证码为空");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        } else if (captcha_num == real_num) {
            $("#captcha_note_parent").addClass("has-success");
            $("#captcha_note_child").text("验证码正确");
            $("#login_btn").removeAttr("disabled");
            return true;
        } else {
            $("#captcha_note_parent").addClass("has-error");
            $("#captcha_note_child").text("验证码错误");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        }
    }

    //提前发个请求查看输入的手机号是否存在，判断欢迎还是警告
    function verifyUsername() {
        //发送ajax请求校验手机号是否可用
        var userphone = document.getElementById("username").value;
        var lock = true;
        if (userphone === "") {
            show_validate_msg("#username", "error", "手机号为空");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        } else {
            if(userphone.match(reg_tel)==null){
                show_validate_msg("#username", "error", "手机号格式不正确");
                $("#login_btn").attr("disabled", "disabled");
                return false;
            }else{
            $.ajax({
                url: "/dcits/login/loginVerifyUserPhone/" + userphone,
                type: "GET",
                success: function (result) {
                    if (result.rtnCode == '-9999') {
                        var msg = result.rtnMsg;
                        show_validate_msg("#username", "error", msg);
                        $("#login_btn").attr("disabled", "disabled");
                        lock = false;
                    } else {
                        var username = result.bean.user.username;
                        show_validate_msg("#username", "success", "欢迎" + username + "登录");
                        $("#login_btn").removeAttr("disabled");
                    }
                }
            });}
            return lock;
        }
    }

    /*{"rtnMsg":"该用户不存在","rtnCode":"-9999","beans":[],"bean":{},"failed":true}*/

    function removeLoginDisabled() {
        $("#login_btn").removeAttr("disabled");
    }

    //登陆方法
    function verifyLogin() {
        $("input[name='username']").blur(verifyUsername);
        $("#captcha").blur(verifyCaptcha);

        //验证各项登录信息不能为空
        if ($("#username").val() == "") {
            show_validate_msg("#username", "error", "手机号为空");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        }

        if ($("#password").val() == "") {
            show_validate_msg("#password", "error", "密码为空");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        }

        if ($("#captcha").val() == "") {
            $("#captcha_note_parent").addClass("has-error");
            $("#captcha_note_child").text("验证码为空");
            $("#login_btn").attr("disabled", "disabled");
            return false;
        }

        //alert(verifyUsername);

        //4297f44b13955235245b2497399d7a93
        //验证码无误，且用户存在
        if (verifyUsername() && verifyCaptcha()) {
            var pwd = $("#password").val();
            //对密码MD5加密
            $("#password").val($.md5(pwd));

            //console.log($("#password").val())

            var userPhone = $("#username").val();
            var pwd = $("#password").val();
            console.log(userPhone + '-->' + pwd);

            $.ajax({
                url: "/dcits/login/verifyLogin",
                type: "post",
                data: {
                    "userPhone": $("#username").val(),
                    "password": $("#password").val()
                },
                success: function (result) {
                    if (result.rtnCode == '0') {
                        var url = result.bean.url;
                        // //alert(url);
                        // //直接静态跳转
                        location.href = url;
                    } else {
                        var msg = result.rtnMsg;
                        show_validate_msg("#password", "error", msg);
                        $("#login_btn").attr("disabled", "disabled");
                    }
                }
            })
        }

    }

    //显示校验结果的提示信息
    function show_validate_msg(ele, status, msg) {
        //清除当前元素的校验状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" === status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" === status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

    /**生成一个随机数**/
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    /**生成一个随机色**/
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    /**绘制验证码图片**/
    function drawPic(show_num) {
        var canvas = document.getElementById("canvas");
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = randomColor(280, 280); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, width, height);
        /**绘制文字**/
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        for (var i = 0; i < 4; i++) {
            var txt = aCode[randomNum(0, aCode.length)];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
            ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
            var x = 10 + i * 25;
            var y = randomNum(25, 45);
            var deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
    }
</script>

</body>
</html>